﻿<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
 <head>
  <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Ext.ux.Wiz - SimpleWizard</title>

  <!-- Change the path to point to your Ext 2.1 stylesheet -->
  <link rel="stylesheet" type="text/css" href="../../../ext-2.1/resources/css/ext-all.css" />

  <!-- Ext.ux.Wiz stylesheet -->
  <link rel="stylesheet" type="text/css" href="../src/resources/css/ext-ux-wiz.css" />
  
</head>

 <body>

  <!-- Change the path to point to your Ext 2.1 files -->
  <script type="text/javascript" src="../../../ext-2.1/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="../../../ext-2.1/ext-all-debug.js"></script>    
  
  
  <!-- In order to make the component work properly, you need to get the 
       Ext.ux.layout.CardLayout-component from http://www.siteartwork.de/cardlayout.
       Download and copy the files to your filesystem, then change this path accordingly  -->
  <script type="text/javascript" src="../../CardLayout/src/CardLayout.js"></script>
  
  <!-- Ext.ux.Wiz files -->
  <script type="text/javascript" src="../src/Wizard.js"></script>
  <script type="text/javascript" src="../src/Header.js"></script>
  <script type="text/javascript" src="../src/Card.js"></script>


  <script type="text/javascript">
    
  

Ext.onReady(function(){
    
    Ext.QuickTips.init();   
    
    var wizard = new Ext.ux.Wiz({
        
        title : 'A simple example for a wizard',
                
        headerConfig : {
            title : 'Simple Wizard Example'    
        },
        
        cardPanelConfig : {
            defaults : {
                baseCls    : 'x-small-editor',
                bodyStyle  : 'padding:40px 15px 5px 120px;background-color:#F6F6F6;',
                border     : false    
            }
        },   
           
        cards : [
        
            // first card with welcome message
            new Ext.ux.Wiz.Card({
                title : 'Welcome',
                items : [{
                    border    : false,
                    bodyStyle : 'background:none;',
                    html      : 'Welcome to the example for <strong>Ext.ux.Wiz</string>, '+
                                'a Ext JS user extension for creating wizards.<br/><br/>'+
                                'Please click the "next"-button and fill out all form values.'    
                }]    
            }),
            
            // second card with input fields last/firstname
            new Ext.ux.Wiz.Card({
                title        : 'Your name',
                monitorValid : true,
                defaults     : {
                    labelStyle : 'font-size:11px'
                },
                items : [{
                        border    : false,
                        bodyStyle : 'background:none;padding-bottom:30px;',
                        html      : 'Please enter your first- and your lastname. Only letters, underscores and hyphens are allowed.'
                    },
                    new Ext.form.TextField({
                        name       : 'firstname',
                        fieldLabel : 'Firstname',
                        allowBlank : false,
                        validator  : function(v){
                            var t = /^[a-zA-Z_\- ]+$/;
                            return t.test(v);
                        }
                    }),
                    new Ext.form.TextField({
                        name       : 'lastname',
                        fieldLabel : 'Lastname',
                        allowBlank : false,
                        validator  : function(v){
                            var t = /^[a-zA-Z_\- ]+$/
                            return t.test(v);
                        }
                    })
                
                ]    
            }),
            
            // third card with input field email-address
            new Ext.ux.Wiz.Card({
                title        : 'Your email-address',
                monitorValid : true,
                defaults     : {
                    labelStyle : 'font-size:11px'
                },
                items : [{
                        border    : false,
                        bodyStyle : 'background:none;padding-bottom:30px;',
                        html      : ' Please enter your email-address.'
                    },
                    new Ext.form.TextField({
                        name       : 'email',
                        fieldLabel : 'Email-Address',
                        allowBlank : false,
                        vtype      : 'email'
                    })
                ]    
            }),            

            // fourth card with finish-message
            new Ext.ux.Wiz.Card({
                title        : 'Finished!',
                monitorValid : true,
                items : [{
                    border    : false,
                    bodyStyle : 'background:none;',
                    html      : 'Thank you for testing this wizard. Your data has been collected '+
                                'and can be accessed via a call to <pre><code>this.getWizardData</code></pre>'+
                                'When you click on the "finish"-button, the "finish"-event will be fired.<br/>'+
                                'If no attached listener for this event returns "false", this dialog will be '+
                                'closed. <br />(In this case, our listener will return false after a popup shows the data you just entered)' 
                }]  
            })   
        
        
        ]
    });
    
    // show the wizard
    wizard.show();
}); 
 
    


  </script>    
    
 </body>
</html>